
<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <title>登入 - layuiAdmin</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/login.css" media="all">
    <style>
        #bindiv{
            padding-top: 100px;
            width: 100%;
            height: 100%;
            z-index: 5;
            position: fixed;
            top: 0px;
            left: 0px;
            display: none;
            /*text-align: center;*/
            /*align-content: center;*/
            background: black;
            /*opacity: 0.8;*/
        }
        #contentHolder{
            opacity: 1;
            z-index: 99;
            margin: 0 auto;
            width: 300px;
            height: 300px;
            /*margin-top: 10px;*/

        }
        #btn_snap{
            margin: 0 auto;
            border: 1px solid #f0f0f0;
            background: #5CACEE;
            color: #FFF;
            width: 100px;
            height: 36px;
            line-height: 36px;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            /*禁止选择*/
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none; /* Chrome/Safari/Opera */
            -khtml-user-select: none; /* Konqueror */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently not supported by any browser */
        }
        #btn_close{
            margin: 0 auto;
            border: 1px solid #f0f0f0;
            background: red;
            color: #FFF;
            width: 100px;
            height: 36px;
            line-height: 36px;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            /*禁止选择*/
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none; /* Chrome/Safari/Opera */
            -khtml-user-select: none; /* Konqueror */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently not supported by any browser */
        }
        #imgBoxxx{
            width: 200px;
            margin: 60px 20px 20px;
        }

    </style>
</head>
<body>
<div id="bindiv" style="display: none" lay-filter="bindiv">
    <div id="contentHolder">
        <video id="video" width="300px" style="border-radius: 50%" height="300px" autoplay></video>
        <canvas style="display:none;" id="canvas" width="300px" height="300px"></canvas>
    </div>
    <div id="btn_snap">验证</div>
    <div id="btn_close" onclick="stop()">关闭</div>
</div>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">

    <div  class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>制造装备物联及生产管 理系统研发</h2>
        </div>
        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-user" for="LAY-user-login-username"></label>
                <input type="text" name="username" id="LAY-user-login-username"  lay-verify="required" placeholder="用户登录" class="layui-input">
            </div>
            <div class="layui-form-item" id="passwordValidation">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
                <input type="password" name="password" id="LAY-user-login-password"  placeholder="密码" class="layui-input">
            </div>
            <div class="layui-form-item" id="emailValidation" style="display: none">
                <div class="layui-row">
                    <div class="layui-col-xs7">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label>
                        <input type="text" name="vercode" id="LAY-user-login-vercode"  value="" placeholder="邮箱代码" class="layui-input">
                    </div>
                    <div class="layui-col-xs5">
                        <div style="margin-left: 10px;">
                            <button class="layui-btn" lay-filter="LAY-user-send-submit" onclick="sendEmail()">发送邮箱代码</button>
<!--                            <img src="https://www.oschina.net/action/user/captcha" class="layadmin-user-login-codeimg" id="LAY-user-get-vercode">-->
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin-bottom: 20px;">
                <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
                <input type="checkbox" name="email" lay-filter="emailValidation" lay-skin="primary"  style="margin-top: 7px;" title="邮箱验证">
                <a href="javascript:void(0)" onclick="start()">人脸验证</a>
<!--                <a href="javascript:void(0)" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;" onclick="passwordAndEmail()">邮箱验证</a>-->
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-login-submit">登 入</button>
            </div>
<!--            <div class="layui-trans layui-form-item layadmin-user-login-other">-->
<!--                <label>社交账号登入</label>-->
<!--                <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>-->
<!--                <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>-->
<!--                <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>-->

<!--                <a href="reg.html" class="layadmin-user-jump-change layadmin-link">注册帐号</a>-->
<!--            </div>-->
        </div>
    </div>

</div>

<script src="/layuiadmin/layui/layui.js"></script>
<script src="/webjars/jquery/3.5.1/jquery.js"></script>
<script>
    function sendEmail() {
        var toId=$("#LAY-user-login-username").val();
        console.log("触发了send")
        $.get("/sys/email?toId="+toId,function (data) {
                layui.layer.msg(data.msg)
            })
        // layui.use(['jquery','layer'],function () {
        //     var $=layui.jquery;
        //     var layer=layui.layer;
        //
        //
        //
        // })
    }
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'user','layer'], function(){
        var $ = layui.$
            ,setter = layui.setter
            ,admin = layui.admin
            ,form = layui.form
            ,router = layui.router()
            ,search = router.search
            ,layer = layui.layer;

        //提交
        form.on('checkbox(emailValidation)', function(obj){
            // layer.msg("触发了复选框",this.checked)
            console.log("出发了")
            if(this.checked){
                $("#LAY-user-login-password").val('');
                $("#emailValidation").show();
                $("#passwordValidation").hide();
            }else{
                $("#LAY-user-login-vercode").val('');
                $("#emailValidation").hide();
                $("#passwordValidation").show();
            }
        })
        form.on('submit(LAY-user-login-submit)', function(obj){
            console.log(obj.field);
            var icon=2;
            $.post("/sys/login",obj.field,({msg})=>{
                console.log(msg)

                if(msg=="ok"){
                    icon=1;
                    location.href = '/sys/home'; //后台主页
                }
                        layer.msg(msg, {
                            offset: '15px'
                            ,icon: icon
                            ,time: 2000
                        });

            })
        });



    });


    var getUserMedia;
    var sheyin=null;
    var canvas = document.getElementById("canvas"),
        pzBtn = document.getElementById("btn_snap"),
        context = canvas.getContext("2d"),
        video = document.getElementById("video");
    function start(){
        var userName=$("[name=username]").val();
        if(userName.trim()==""){
            layui.use('layer',function () {
                layui.layer.msg('请输入用户名和邮箱')
            })
            return;
        }
        $("#bindiv").show();
        // alert('该页面会调用您的摄像头')
        // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
        if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
        }
        // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
        // 使用getUserMedia，因为它会覆盖现有的属性。
        // 这里，如果缺少getUserMedia属性，就添加它。

        if (navigator.mediaDevices.getUserMedia === undefined) {
            navigator.mediaDevices.getUserMedia = function (constraints) {
                var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
                console.log(getUserMedia);
                if (!getUserMedia) {
                    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                }
                return new Promise(function (resolve, reject) {
                    getUserMedia.call(navigator, constraints, resolve, reject);
                });
            }
        }

        // if (navigator.mediaDevices.getUserMedia === undefined) {
        //     navigator.mediaDevices.getUserMedia = function (constraints) {
        //         // 首先获取现存的getUserMedia(如果存在)
        //         getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        //         // 有些浏览器不支持，会返回错误信息
        //         // 保持接口一致
        //         if (!getUserMedia) {
        //             return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
        //         }
        //         //否则，使用Promise将调用包装到旧的navigator.getUserMedia
        //         return new Promise(function (resolve, reject) {
        //             getUserMedia.call(navigator, constraints, resolve, reject);
        //         });
        //     }
        // }

        var constraints = { audio: false, video: {width: 720,height:720} }
        navigator.mediaDevices.getUserMedia(constraints)
            .then(function (stream) {
                sheyin=stream.getTracks()[0];
                var video = document.querySelector('video');
                // 旧的浏览器可能没有srcObject
                if ("srcObject" in video) {
                    video.srcObject = stream;
                } else {
                    //避免在新的浏览器中使用它，因为它正在被弃用。
                    video.src = window.URL.createObjectURL(stream);
                }
                video.onloadedmetadata = function (e) {
                    video.play();
                };
            })
            .catch(function (err) {
                console.log(err.name + ": " + err.message);
            });


    }

    function stop(){
        sheyin.stop();
        $("#bindiv").hide();
    }


    pzBtn.addEventListener("click", function () {
        // 点击，canvas画图
        context.drawImage(video, 0, 0, 300, 300);
        // 获取图片base64链接
        var image = canvas.toDataURL('image/png');
        // 定义一个img
        var img = new Image();
        //设置属性和src
        img.id = "imgBoxxx";
        img.src = image;
        //将图片添加到页面中
        console.log(image)
        var userName=$("[name=username]").val();
        console.log("用户名称:"+userName)
        // document.body.appendChild(img);
        // stop();
        video.pause();
        var data={username:userName,image:image}
        var xiangsi;
        var user;
        $.ajax({
            type: "post",
            url: "/compareFaces",
            data: data,
            // contentType: false,//告诉客户端不要设置Content-Type 请求头部
            // processData: false,//告诉客户端不处理过程数据
            async:false,//设置同步/异步的参数[true异步  false同步]
            success: function (result) {//完成后的事件
                xiangsi=result.data;
                user=result.user;
            },
            error: function (error) {//出现错误时的事件
                console.log(error)
            }
        });
        console.log(xiangsi);
        if(xiangsi>0.9){
            console.log(user);
            $.post("/sys/login",user).done(({msg})=>{
                console.log(msg);
                if(msg=="ok"){
                    location.href = '/sys/home';
                }
            })
        }else{
            layui.use(['layer'],function () {
                layui.layer.msg("人脸验证验证失败");
            })
            video.play();
        }
        // $.post("/compareFaces", data, function (result) {
        //     console.log("人脸相似度为:"+result.data);
        //     if(result.data>0.9){
        //
        //         // location.href = '/sys/home'; //后台主页
        //     }else{
        //         layui.use(['layer'],function () {
        //             layui.layer.msg("人脸验证验证失败");
        //         })
        //         video.play();
        //     }
        //
        //
        //
        //     // $('#similarId').text(': '+result.data)
        // });


        // base64转文件
        function dataURLtoFile(dataurl, filename) {
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, {type: mime});
        }
        console.log(dataURLtoFile(image, 'aa.png'));
    });
</script>
</body>
</html>